<template>
    <div>
        <van-nav-bar
                title="质检记录"
                left-text="返回"
                right-text="添加"
                @click-right="addCustomer"
                left-arrow
                @click-left="onBack"
        />
        <form action="/">
            <van-search
                    v-model="keyword"
                    placeholder="请输入搜索关键词"
                    show-action
                    @search="onSearch"
            />
        </form>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
          <template
            v-for="item in list"
            >
          <van-cell :title="'编号：'+item.QCRptNo" :value="item.QCDate" :border="false" style="padding-bottom: 0;" :to="'qc/'+item.FID"/>
          <van-cell :title="'源单编号：'+item.BillNo" :border="false" style="padding-bottom: 0;padding-top: 0;" :to="'qc/'+item.FID"/>
          <van-cell :title="'供应商：'+item.ProvBriefName" :value="'采购员：'+item.PurName" label="共15条记录，已上传4条" style="padding-top: 0;" :to="'qc/'+item.FID"/>
          </template>

        </van-list>
    </div>
</template>
<script>
  import { QCList } from '@/api'
  import { Field, Button, Cell, CellGroup, List, Search, NavBar } from 'vant'

  export default {
    components: {
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [List.name]: List,
      [Search.name]: Search,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data () {
      return {
        list: [],
        loading: false,
        finished: false,
        keyword: '',
        page: 1
      }
    },
    methods: {
      onSearch () {
        this.list = []
        this.page = 1
        this.onLoad()
      },
      onLoad () {
        // this.loading = true
        let data = {page: this.page, keyword: this.keyword}
        QCList(data).then((res) => {
          this.page ++
          for (let i in res.data) {
            this.list.push(res.data[i])
          }
          // 数据全部加载完成
          if (res.data.length <= 0) {
            this.finished = true
          }

          // 加载状态结束
          this.loading = false
        })
      },
      onBack () {
        this.$router.back()
      },
      addCustomer () {
        this.$router.push({path: 'customer-add'})
      }
    }
  }
</script>
